<template>
  <div>
    <div v-show="true">
      <el-button style="float: right; padding: 3px 0" type="text" @click="getPtps">刷新</el-button>
      <el-table
          :data="ptps"
          :row-class-name="tableRowClassName"
          @cell-click="tabClick"
          @cell-dblclick="handleClick"
          @row-dblclick="toPtp"
          visEdit="true">

        <el-table-column
            type="index"
            width="50">
        </el-table-column>

        <el-table-column
            property="name"
            label="名称"
            sortable>
          <template slot-scope="scope">
            {{ "端口-" + computePort(scope.row.name) }}
          </template>
        </el-table-column>

        <el-table-column
            width="auto"
            property="state-pac"
            label="工作状态">
          <template slot-scope="scope">
            {{ scope.row['state-pac']['operational-state'] }}
          </template>

        </el-table-column>


        <el-table-column
            property="supported-layer-protocol-name"
            label="支持协议">
          <template slot-scope="scope">
            <div v-if="scope.row['supported-layer-protocol-name'] instanceof Array">
              <span v-for="(i,key) in scope.row['supported-layer-protocol-name']" :key="key">{{ computeProtocol(i) }}
                  <el-divider direction="vertical" v-if="key!==scope.row['supported-layer-protocol-name'].length-1">
                  </el-divider>
              </span>
            </div>
            <div v-else>
              {{ computeProtocol(scope.row['supported-layer-protocol-name']) }}
            </div>

          </template>
        </el-table-column>

        <el-table-column
            width="150"
            property="layer-protocol-name"
            label="当前协议">
          <template slot-scope="scope">
            {{ computeProtocol(scope.row['layer-protocol-name']) }}
          </template>
        </el-table-column>

        <el-table-column
            width="auto"
            property="state-pac"
            label="管理状态">

          <template slot-scope="scope">
            {{ scope.row['state-pac']['admin-state'] ==="enabled"?"可管理":"不可管理" }}
            <!--                    <div @dblclick="changeEnddate(scope.$index,'admin-state', scope.row)" style="height: 40px;line-height: 40px;">-->
            <!--                      <span v-show="!scope.row.is_show_tag1">{{ scope.row['state-pac']['admin-state'] }}</span>-->
            <!--              <el-input :ref='"enddateinput"+"['state-pac']['admin-state']"+"&"+scope.$index'-->
            <!--                        @blur="switchShow(scope.$index,'admin-state')"-->
            <!--                        clearable @keyup.enter.native="$event.target.blur"-->
            <!--                        v-show="scope.row.is_show_tag1" size="mini"-->
            <!--                        v-model="scope.row.statePac.admin-state">-->
            <!--              </el-input>-->
            <!--                    </div>-->
          </template>

        </el-table-column>

        <el-table-column
            width="auto"
            property="laser-status"
            label="激光器状态">
          <template slot-scope="scope">
            <div @dblclick="changeEnddate(scope.$index,'laser-status', scope.row)"
                 style="height: 40px;line-height: 40px;">
              <span v-show="!scope.row.is_show_tag1">{{ scope.row['laser-status'] }}</span>
              <el-input :ref='"enddateinput"+"laser-status"+"&"+scope.$index'
                        @blur="switchShow(scope.$index,'laser-status')"
                        clearable @keyup.enter.native="$event.target.blur" v-show="scope.row.is_show_tag1" size="mini"
                        v-model="scope.row['laser-status']"></el-input>
            </div>
          </template>
        </el-table-column>
        <!--          <el-table-column width="150" property="ctp" label="ctp" sortable></el-table-column>-->
      </el-table>
    </div>
    <div v-show="false">

      <MMtest/>
    </div>
  </div>

</template>

<script>
import axios from "axios";
import MMtest from "@/components/test/MMtest";

export default {
  name: "BatchConfigPtp",
  components: {
    MMtest,
  },
  data() {
    return {
      //双击修改数据相关
      row: '',
      col: '',
      tmpRow: {},

      ptpListName: [],

      nodeName: "",
      tabClickIndex: '',
      tabClickLabel: '',
      ptps: [
        {
          "interface-type": "",
          "laser-status": "",
          name: "",
          "layer-protocol-name": "",
          "supported-layer-protocol-name": ["ETH", "ODU", "SDH"],
          "loop-back": "",
          "state-pac": {
            "admin-state": "",
            "operational-state": "",
          },
        },
      ],
    };
  },
  methods: {

    toPtp(row, column, event) {

      console.log('当前行数据： ', row)
      this.$router.push({
        name: 'PTP',
        params: {
          name: row.name,
          protocol: row['layer-protocol-name']
        }
      });
    },

    // 切换input框的显示状态
    switchShow(index, tag, tmp_this = this) {
      // 因为涉及到调用不同名称的变量, 不清楚怎么写, 只能先用switch case解决
      switch (tag) {
        case "laser-status":
          tmp_this.ptps[index].is_show_tag1 = !tmp_this.ptps[index].is_show_tag1;
          break;
        case "admin-state":
          tmp_this.ptps[index].is_show_tag2 = !tmp_this.ptps[index].is_show_tag2;
          break;
          // ...
      }
      tmp_this.ptps = [...tmp_this.ptps];//因为我table绑定的表格数据是后接过来赋值的，所以需要这步操作，如果没有1、2步骤这个可以不加。后面也一样
    },

    // 显示input框, 使光标焦点当前input框
    changeEnddate(index, tag, rowdata) {
      console.log('----------------')
      console.log(index, tag, rowdata)
      console.log('----------------')
      this.switchShow(index, tag, this);
      // console.log('enddateinput' + index, typeof 'enddateinput' + index);
      // console.log(rowdata, typeof rowdata);
      setTimeout(() => {  //定时器是为了避免没有获取到dom的情况报错，所以象征性的给1毫秒让他缓冲
        this.$refs['enddateinput' + tag + '&' + index].focus()
        //el-input的autofocus失效，所以用这个方法。对应在template里的refs绑定值
      }, 1)
    },

    computePort(name) {
      let sub = "/port=";
      for (let i = 0; i <= (name.length - sub.length); i++) {
        if (name.substring(i, i + sub.length) === sub) {
          return name.substring(i + sub.length, name.length);
        }
      }
    },
    computeProtocol(name) {
      return name.substring(name.indexOf(":") + 1);
    },
    handleClick({row, column, cell, event}) {

      console.log(row, column);
      console.log(cell, event);

    },
    getPtps() {
      this.ptps = [];

      this.nodeName = this.$route.params.node;
      console.log("shoubudaoma", this.$route.params.node)
      this.ptpListName = this.$route.params.ptps;
      console.log("liebiao", this.ptpListName);
      for (let i = 0; i < this.ptpListName.length; i++) {
        axios.post("/topology/node/" + this.nodeName + "/ptps", {ptp:{name: this.ptpListName[i].name}}).then(
            (response) => {
              console.log("请求成功", response.data);
              this.ptps.push(response.data.ptps.ptp);
              // response.data;
            },
            (error) => {
              console.log("失败！", error.message);
            }
        );
      }

    },
    tableRowClassName({row, rowIndex}) {
      // 把每一行的索引放进row
      row.index = rowIndex
    },
    // tabClick row 当前行 column 当前列
    tabClick(row, column, cell, event) {
      console.log(cell, event);
      switch (column.label) {
        case '管理状态':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default:
          return
      }
      console.log('tabClick', this.tabClickIndex, row.adName, row.adSort)
    },
    // 失去焦点初始化
    inputBlur(row) {
      // console.log('row', row)
      this.tabClickIndex = null
      this.tabClickLabel = ''
    }
  },
  mounted() {
    // this.$bus.$on("node-name", (data) => {
    //   console.log("PTP - node : ", data);
    //   this.nodeName = data;
    // });
  },
  created() {
    this.getPtps();
  }
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>